<template>
    <div>
      <h3 style="text-align:center;">动态断点续传功能</h3>
      上传资源名称:<input type="text" v-model="ItemName" />
      上传资源SN:<input type="text" v-model="ItemSN" />
      <button @click = "doAdd">添加</button>
      <ul class="th">
        <li>名称</li>
        <li>&nbsp;</li>
        <li>进度</li>
      </ul>
      <ul v-for = "(item, index) in items" :key = "index">
        <li v-text = "item.name"></li>
        <li class="li-blue">
          <span :id = "'btnStart_' + item.sn" v-show="item.state === 'start'">上传</span>
          <span :id = "'btnPause_' + item.sn" @click = "doPause(item.sn, item)" v-show="item.state === 'pause'">暂停</span>
          <span :id = "'btnRestore_' + item.sn" @click = "doRestore(item.sn, item)" v-show="item.state === 'restore'">继续</span>
          <span :id = "'btnClear_' + item.sn" @click = "doClear(item.sn, item)" v-show="item.state === 'clear'">清除</span>
        </li>
        <li :id = "'txtProgess_' + item.sn" class="li-green"></li>
      </ul>
    </div>
</template>

<script>
  import OSS from 'ali-oss';
  export default {
    name: 'OssUpload',
    data() {
      return {
        ItemSN:'1523E97C-C555-4275-9F27-38CC224DEC4D-1',
        ItemName: "资源论文",
        items:[],
        MyNewData:{}
      }
    },
    updated() {
      console.log('updated');
    },
    methods: {
      doClearInput() {
        this.ItemName = "";
      },
      doAdd() {
        let me = this;
        if(!(me.ItemName && me.ItemSN)){
          window.alert('名称和SN都不能为空!');
          return;
        }
        let newData = {};
        newData.name = me.ItemName;
        newData.sn = me.ItemSN;
        newData.state = "start";
        newData.filesn = "";

        me.items.push(newData);
        me.doClearInput();

        me.$nextTick(function() {
          newData.Uploader = {};
          newData.Uploader.ProgTag = document.getElementById('txtProgess_' + newData.sn);

          // 调用上传-开始
          me.$Global.zcAliFile.doInit({
            AliOss:OSS,
            UserData:newData,
            FileCfg:{
              ButtonId: 'btnStart_' + newData.sn,
              Accept: "image/png;image/jpeg;image/gif;image/tiff;image/bmp;video/mp4;video/quicktime;audio/mpeg;application/pdf;application/msword;application/vnd.ms-excel;application/vnd.ms-powerpoint;application/vnd.openxmlformats-officedocument.wordprocessingml.document;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;application/vnd.openxmlformats-officedocument.presentationml.presentation;",
              ExtName: ".jpeg,.jpg,.bmp,.png,.gif,.mp4,.mov,.mp3,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
            },
            fnFileAdded:me.cbFileAdded,
            fnUpingProgress:me.cbUpingProgress,
            fnUpingSuccess:me.cbUpingSuccess,
            fnUpingError:me.cbUpingError,
            Scope:me
          });
          // 调用上传
        })
      },
      doPause(sn, item) {
        let me = this;
        item.state = "restore";

        me.$nextTick(function() {
          item.Uploader.Client.cancel();
        });
      },
      doRestore(sn, item) {
        let me = this;
        item.state = "pause";

        me.$nextTick(function() {
          me.$Global.zcAliFile.doNormRestore({
            UserData:item,
            fnUpingProgress:me.cbUpingProgress,
            fnUpingSuccess:me.cbUpingSuccess,
            fnUpingError:me.cbUpingError,
            Scope:me
          });
        });
      },
      doClear(sn, item) {
        let me = this;
        item.filesn = "";
        item.state = "start"
        item.Uploader.ProgTag.innerText = "";
      },
      cbFileAdded(options) {
        options.UserData.state = "pause";
      },
      cbUpingProgress(percent, options) {
        options.UserData.Uploader.ProgTag.innerText = percent + "%";
      },
      cbUpingSuccess(resJson, options) {
        options.UserData.Uploader.ProgTag.innerText = "完成";
        options.UserData.state = "clear";
        options.UserData.filesn = resJson.data.SN;
        console.log('上传完成-结果',resJson);
      },
      cbUpingError(err, options) {
        console.log('cbUpingError-err',err);
        console.log('cbUpingError-options',options);
      }
    },
    mounted() {
    }
  };
</script>

<style scoped>
  ul {
    list-style:none;
    padding:0px;
    margin:0px;
    width:100%;
    height:50px;
    line-height:50px;
    border:1px solid #cccccc;
    border-top:0px;
    font-size:18px;
  }
  ul li{
    display:block;
    width:33.3%;
    float:left;
    text-indent:2em
  }
  .th{
    background:#cccccc;
    font-weight:bold;
    border-top:1px
  }
  .li-blue {
    cursor: pointer;
    color:#007aff;
  }
  .li-green {
    color:#2ac845;
  }
</style>
